<template>
    <div class="screensharemark">
        <div id="handsign" class="handsigncontent">
          <canvas id="handWhiteboard" width="300" height="300"></canvas>
          <div class="code">AS894DJKlILJK00UUIHUIU98</div>
        </div>
    </div>
</template>

<script>
   import imchat from '../../tool/imchat';
    export default {
        name: "RemoteHandSign",
        mounted() {
          this.whiteboardCanvas = new fabric.Canvas('handWhiteboard');
          this.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
          this.whiteboardCanvas.selection = false; //画板不显示选中
          var self = this;
          imchat.$on('handwriting',function (code) {
            self.showCache(code);
          });
        },
        methods:{
          showCache(data){
            this.whiteboardCanvas.loadFromJSON(JSON.parse(data));
            this.whiteboardCanvas.renderAll();
            this.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
            this.whiteboardCanvas.selection = false; //画板不显示选中
          },
        }
    }
</script>

<style scoped>

  .screensharemark{
    width: 100%;
    /*background-color: yellow;*/
    margin-top: -80px;
  }

  .handsigncontent{
    width: 300px;
    height: 330px;
    margin: 0 auto;
    background-color: white;
    margin-top: 100px;
    position: relative;
    border: 1px solid #ececec;
  }

  .code{
    position: absolute;
    /*left: 75px;*/
    text-align: left;
    height: 30px;
  }


</style>
